<template>
	<view class="wrapper" :style="{padding:`calc(200rpx + ${safeTop}px) 0 0`}">
		<div class="posf">
			<div class="header flex-start" :style="{padding:`calc(10rpx + ${safeTop}px) 30rpx 60rpx`}">
				<navigator url="/pages/woDe/woDe" open-type="switchTab">
					<u-icon name="arrow-left" color="#ffffff" size="26"></u-icon>
				</navigator>
				<div class="cfff f34 ml20">电子票券</div>
			</div>
			<div class="nav-bar mb30">
				<!-- <div class="keyword flex-start bfff">
					<u-icon name="search" color="#999999" size="20"></u-icon>
					<input type="text" placeholder="搜索记录" placeholder-class="c999 f26" class="ml15" />
				</div> -->
				<div class="main space-around f32">
					<div class="posr" :class="navIndex==0?'active':''" @click="setNav(0)">电影票</div>
					<!-- <div class="posr" :class="navIndex==1?'active':''" @click="setNav(1)">视听券</div> -->
					<div class="posr" :class="navIndex==2?'active':''" @click="setNav(2)">本地生活券</div>
					<!-- <div class="posr" :class="navIndex==3?'active':''" @click="setNav(3)">兑换券</div> -->
				</div>
			</div>
		</div>
		<div class="content">
			<dianYingPiao v-show="navIndex==0"></dianYingPiao>
			<!-- <shiTingQuan v-show="navIndex==1"> </shiTingQuan> -->
			<benDiQuan v-show="navIndex==2"></benDiQuan>
			<!-- <duiHuanQuan v-show="navIndex==3"></duiHuanQuan> -->
		</div>
	</view>
</template>

<script>
	import dianYingPiao from './components/dianYingPiao.vue'
	// import shiTingQuan from './components/shiTingQuan.vue'
	import benDiQuan from './components/benDiQuan.vue'
	// import duiHuanQuan from './components/duiHuanQuan.vue'
	export default {
		data() {
			return {
				navIndex: 0
			}
		},
		components: {
			dianYingPiao,
			// shiTingQuan,
			benDiQuan,
			// duiHuanQuan
		},
		onLoad(e) {
			this.navIndex = e.navIndex || 0
		},
		onBackPress() {
			uni.switchTab({
				url: '/pages/woDe/woDe'
			})
			return false
		},
		methods: {
			// 切换状态栏
			setNav(e) {
				this.navIndex = e
			},
			goDetail() {
				uni.navigateTo({
					url: '../benDi/xiangXi'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 20rpx 30rpx;
	}

	.nav-bar {
		width: 100%;
		background: linear-gradient(to bottom, #FEDAEB, #FDFAFB);
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 25rpx 25rpx 0;
		margin-top: -33rpx;
		// box-shadow: 4rpx 0rpx 3rpx 0rpx #FF5859;
		box-shadow: 0rpx -4rpx 6rpx 0 #FF5859;

		.keyword {
			padding-left: 20rpx;
			width: 675rpx;
			height: 50rpx;
			box-shadow: 0rpx 0rpx 16rpx 2rpx #FDCBE0;
			border-radius: 25rpx 25rpx 25rpx 25rpx;
			margin: 0 auto 35rpx;
		}

		.main {
			padding-bottom: 30rpx;

			.posr {}

			.active {
				color: #FF5555;
				font-weight: 800;

				&::after {
					content: '';
					position: absolute;
					left: calc(50% - 60rpx);
					bottom: -30rpx;
					background-color: #FD7D7E;
					width: 120rpx;
					height: 8rpx;
					border-radius: 35rpx 35rpx 0 0;
				}
			}
		}
	}

	.posf {
		top: 0;
		left: 0;
		z-index: 5;
		width: 100%;
	}

	.header {
		background: linear-gradient(to left, #F857A5, #FF5858);
		padding-left: 30rpx;
		padding-bottom: 55rpx;
	}
</style>